<%--
  Created by IntelliJ IDEA.
  User: holle
  Date: 2020/7/25
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=basePath%>script/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
	        $(".delete").click(function () {
		        var str = $(this).parent().parent();
		        var  title = $.trim(str.find("td:first").text());
		        var flag = confirm("你确定要删除《"+title+"》的信息吗？");
		        if (flag){
		        	return true;
                }
		        return false;
			})
            //使用ajax修改商品的数量
			//1. 获取页面中所有的 text, 并为其添加 onchange 响应函数. 弹出确认对话框: 确定要修改吗?
            $(":text").change(function () {
	            var  quantityVal = $.trim(this.value);
	            var  flag = false;
                var  reg =/^\d+$/g;
                var quantity = -1;
                if (reg.test(quantityVal)){
                	quantity = parseInt(quantityVal);
                	if (quantity>=0){
                		flag  = true;
                    }
                }
                if (!flag){
                	alert("输入的数量不合法!");
                	$(this).val($(this).attr("class"));
                	return;
                }
				var $tr = $(this).parent().parent();
				var title = $.trim($tr.find("td:first").text());
				var flag = confirm("确定要修改《" + title + "》的数量吗?");

				if(!flag){
					$(this).val($(this).attr("class"));
					return;
				}

                var url = "cart/updateqnum";
                var idVal = $.trim(this.name);
                var args = {"id":idVal, "quantity":quantityVal, "time":new Date()};
				$.post(url, args, function(data){
					var bookNumber = data.bookNumber;
					var totalMoney = data.totalMoney;

					$("#totalMoney").text("总金额: ￥" + totalMoney);
					$("#bookNumber").text("您的购物车中共有" + bookNumber + "本书");
				},"JSON");

			});
		})
    </script>
</head>
<body>
<center>
    <h3>图书商店购物车</h3>
    <br><br>
    <div id="bookNumber">您的购物车中共有${sessionScope.ShoppingCart.bookNumber}本书</div>
    <table cellpadding="10">
        <tr>
            <td>书名</td>
            <td>数量</td>
            <td>价格</td>
            <td>&nbsp;</td>
        </tr>

        <c:forEach items="${sessionScope.ShoppingCart.items }" var="item">
            <tr>
                <td>${item.book.book_name }</td>
                <td>
                    <input class="${item.quantity }" type="text" size="1" name="${item.book.bookid }" value="${item.quantity }"/>
                </td>
                <td>${item.book.book_price }</td>
                <td><a href="cart/remove?bookid=${item.book.bookid }" class="delete">删除</a></td>
            </tr>
        </c:forEach>

        <tr>
            <td colspan="4" id="totalMoney">总金额: ￥ ${ sessionScope.ShoppingCart.totalMoney}</td>
        </tr>

        <tr>
            <td colspan="4">
                <a href="book/findallbook">继续购物</a>
                &nbsp;&nbsp;
                <a href="cart/clearCart">清空购物车</a>
                &nbsp;&nbsp;
                <a href="bookServlet?method=forwardPage&page=cash">结账</a>
                &nbsp;&nbsp;
            </td>
        </tr>

    </table>
</center>
</body>
</html>

